<template>
  <div class="app-layout" :class="{ 'dark-theme': isDarkMode }">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="header-content">
        <!-- 左侧Logo和标题 -->
        <div class="header-left">
          <div class="logo">
            <img src="/vite.svg" alt="Logo" class="logo-img" />
            <span class="app-title">{{ localeStore.t('app.title') }}</span>
          </div>
        </div>

        <!-- 中间导航菜单 -->
        <nav class="header-nav">
          <router-link
            v-for="item in navItems"
            :key="item.path"
            :to="item.path"
            class="nav-item"
            :class="{ active: $route.path === item.path }"
          >
            {{ item.title }}
          </router-link>
        </nav>

        <!-- 右侧功能区 -->
        <div class="header-right">
          <!-- 语言切换 -->
          <el-dropdown class="locale-dropdown" @command="handleLocaleChange">
            <span class="dropdown-link">
              {{ currentLocale === 'zh-CN' ? '简体中文' : 'English' }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in localeOptions"
                  :key="item.value"
                  :command="item.value"
                  :class="{ active: currentLocale === item.value }"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <!-- 主题切换 -->
          <theme-toggle />
        </div>
      </div>
    </header>

    <!-- 面包屑导航 -->
    <div v-if="$route.path !== '/'" class="breadcrumb-container">
      <div class="content-wrapper">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">
            {{ localeStore.t('nav.home') }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{ getCurrentPageTitle() }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <main class="app-main">
      <div class="content-wrapper">
        <router-view />
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="content-wrapper">
        <p>&copy; 2024 {{ localeStore.t('app.title') }}. 基于 Vue 3 + Element Plus + Ant Design Vue</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowDown } from '@element-plus/icons-vue';
import { useThemeStore } from '@/stores/theme';
import { useLocaleStore } from '@/stores/locale';
import ThemeToggle from './ThemeToggle.vue';

const route = useRoute();
const themeStore = useThemeStore();
const localeStore = useLocaleStore();

// 导航菜单项
const navItems = computed(() => [
  { path: '/', title: localeStore.t('nav.home') },
  { path: '/element-form', title: localeStore.t('nav.element-form') },
  { path: '/ant-form', title: localeStore.t('nav.ant-form') },
  { path: '/theme-demo', title: '主题演示' },
]);

// 主题相关
const isDarkMode = computed(() => themeStore.isDarkMode);

// 语言相关
const currentLocale = computed(() => localeStore.currentLocale);
const localeOptions = computed(() => localeStore.localeOptions);
const handleLocaleChange = (locale: string) => {
  localeStore.changeLocale(locale as any);
};

// 获取当前页面标题
const getCurrentPageTitle = () => {
  const currentNav = navItems.value.find((item) => item.path === route.path);
  return currentNav?.title || '未知页面';
};

// 组件挂载时初始化
onMounted(() => {
  themeStore.initTheme();
  themeStore.watchSystemTheme();
  localeStore.initLocale();
});
</script>

<style scoped>
.app-layout {
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  transition: all 0.3s ease;
}

.dark-theme {
  background-color: #121212;
  color: #e0e0e0;
}

/* 顶部导航栏 */
.app-header {
  background: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.dark-theme .app-header {
  background: #1f1f1f;
  box-shadow: 0 2px 12px 0 rgb(255 255 255 / 10%);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 32px;
  height: 32px;
}

.app-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.dark-theme .app-title {
  color: #e0e0e0;
}

.header-nav {
  display: flex;
  gap: 32px;
}

.nav-item {
  color: #606266;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #409eff;
  background-color: #ecf5ff;
}

.nav-item.active {
  color: #409eff;
  background-color: #ecf5ff;
}

.dark-theme .nav-item {
  color: #a0a0a0;
}

.dark-theme .nav-item:hover,
.dark-theme .nav-item.active {
  color: #409eff;
  background-color: rgb(64 158 255 / 10%);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.locale-dropdown {
  cursor: pointer;
}

.dropdown-link {
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dark-theme .dropdown-link {
  color: #a0a0a0;
}

.theme-toggle {
  width: 40px;
  height: 40px;
}

/* 面包屑导航 */
.breadcrumb-container {
  background: white;
  border-bottom: 1px solid #ebeef5;
  padding: 12px 0;
}

.dark-theme .breadcrumb-container {
  background: #1f1f1f;
  border-bottom: 1px solid #3a3a3a;
}

/* 主要内容区域 */
.app-main {
  flex: 1;
  padding: 24px 0;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 页脚 */
.app-footer {
  background: white;
  border-top: 1px solid #ebeef5;
  padding: 24px 0;
  text-align: center;
}

.dark-theme .app-footer {
  background: #1f1f1f;
  border-top: 1px solid #3a3a3a;
}

.app-footer p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.dark-theme .app-footer p {
  color: #a0a0a0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }

  .header-nav {
    display: none;
  }

  .content-wrapper {
    padding: 0 16px;
  }

  .app-title {
    font-size: 18px;
  }
}
</style>
